<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/order/client'
import ProductItem from './components/ProductItem.vue'
import { HomeWrap } from '@/components/HomeWrap'
import OrderStep from '@/views/Home/Order/components/OrderStep.vue'
import { ElMessage } from 'element-plus'
import { orderStatusMap } from '@/constants/order'

defineOptions({
  name: 'OrderDetail'
})
const route = useRoute()
const orderInfo = ref({
  orderId: 0,
  orderNo: '',
  orderStatus: 0,
  userId: 0,
  payAmount: 0,
  remark: '',
  createdAt: '',
  updatedAt: '',
  delFlag: 0
})

const orderGoodsList = ref<any[]>([])

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const orderNo = route.query.orderNo || route.params.orderNo
    if (!orderNo) {
      ElMessage.error('缺少订单号参数')
      return
    }

    const res = await getOrderDetail(orderNo as string)
    if (res && res.data) {
      orderInfo.value = res.data.orderInfo
      orderGoodsList.value = res.data.orderGoodsList
    } else {
      ElMessage.error('获取订单详情失败')
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  }
}

onMounted(() => {
  fetchOrderDetail()
})
</script>
<template>
  <HomeWrap>
    <div class="page">
      <h2>订单信息</h2>
      <!-- 头部信息 -->
      <el-card shadow="hover" class="info-card">
        <div class="info-row">订单编号：{{ orderInfo.orderNo }}</div>
        <div class="info-row">订单状态：{{ orderStatusMap[orderInfo.orderStatus] }}</div>
        <div class="info-row">下单时间：{{ orderInfo.createdAt }}</div>
        <div class="info-row">商品件数：{{ orderGoodsList.length }}</div>
        <div class="info-row">订单金额：¥{{ orderInfo.payAmount }}</div>
        <div class="info-row" v-if="orderInfo.remark">订单备注：{{ orderInfo.remark }}</div>
      </el-card>
      <h2>进度信息</h2>
      <!-- 状态进度条 -->
      <OrderStep :active="orderInfo.orderStatus" />

      <!-- 商品列表 -->
      <h2>商品信息</h2>
      <ProductItem
        v-for="item in orderGoodsList"
        :key="item.orderGoodsId"
        :qty="item.qty"
        :img="item.mainImg || '/images/1.webp'"
        :title="item.title"
        :origin-price="item.crossedPrice"
        :current-price="item.price"
        :specs="item.skuCode ? [item.skuCode] : []"
      />
    </div>
  </HomeWrap>
</template>

<style scoped>
.page {
  margin: 0 auto;
  padding: 16px;
}

h2 {
  text-align: left;
  margin-bottom: 24px;
}

.info-card,
.goods-card {
  margin-bottom: 16px;
}

.info-row {
  font-size: 14px;
  line-height: 1.8;
}
</style>
